<template>
	<view>
		<!-- 	<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view> -->
		<!-- 	
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @click="gohis()">
					<u-icon  bold=true size="20" name="arrow-left" ></u-icon>
				</view>
				<view class="kaoshi-head-m">{{cityName}}题库</view>
			</view>
		</view> -->


		<view style="background-color: #ffffff;height: 60px;">
			<uni-search-bar style="background-color: #f4f4f4;" class="uni-mt-10" radius="100" placeholder="请输入搜索内容"
				clearButton="auto" cancelButton="none" @blur="search()" v-model="inputVal" />
		</view>
		<!-- 全部为空 -->
		<u-empty v-if="unit_zylist==''&&unit_list==''" mode="list"
			icon="https://shuati26.kptedu.com/uploads/image/kaifazhong.png" text="正在努力开发中,请敬请期待哦~" textColor="#666"
			width="300rpx" height="300rpx">
		</u-empty>

		<!-- 搜索到的内容 -->

		<!-- <u-empty v-else-if=""
			      mode="list"
			      icon="https://shuati26.kptedu.com/uploads/image/kaifazhong.png"
			      text="网络走失了,赶紧刷新一下吧~"
			      textColor="#666"
			      width="300rpx"
			      height="300rpx"
			    >
			    </u-empty> -->

		<view v-if="searchResult==''&&(unit_list!=''||unit_zylist!='')"
			style="padding-top: 20rpx;border-radius: 20rpx;background-color: #f5f5f5;">
			<view class="curriculum-title">公共课</view>
			<u-empty v-if="unit_list==''" mode="list" icon="https://shuati26.kptedu.com/uploads/image/kaifazhong.png"
				text="正在努力开发中,请敬请期待哦~" textColor="#666" width="300rpx" height="300rpx">
			</u-empty>
			<view v-else class="curriculum-book">
				<view class="book-item" v-for="(item, index) in unit_list" :key="index">
					<view class="curriculum-book-item" @tap="goto_detail(item,'1')">
						<view class="vip-image">
							<!-- <image src="../../../static/img/mianfei.png"></image> -->
							<image v-if="item.vipswitch==0&&item.price==0" src="../../../static/img/mianfei.png">
							</image>
							<image v-else-if="item.vipswitch!=0&&item.price==0" src="../../../static/img/vip.png">
							</image>
							<image v-else="item.vipswitch==0&&item.price!=0" src="../../../static/img/money.png">
							</image>
						</view>
						<image class="curriculum-book-img" :src="item.image"></image>
						<text class="curriculum-book-name">{{item.name}}<text
								v-if="item.vipswitch!=0&&item.price==0">VIP</text></text>
					</view>
					<view style="width: 2px;height: 200rpx;background-color: white;"></view>
				</view>
			</view>

			<view class="curriculum-title">专业课</view>
			<u-empty v-if="unit_zylist==''" mode="list" icon="https://shuati26.kptedu.com/uploads/image/kaifazhong.png"
				text="正在努力开发中,请敬请期待哦~" textColor="#666" width="300rpx" height="300rpx">
			</u-empty>
			<view v-else class="curriculum-book">
				<view class="book-item" v-for="(item,index) in unit_zylist" :key="index">
					<view class="curriculum-book-item" @tap="goto_detail(item,'1')">
						<view class="vip-image">
							<image v-if="item.vipswitch==0&&item.price==0" src="../../../static/img/mianfei.png">
							</image>
							<image v-else-if="item.vipswitch!=0&&item.price==0" src="../../../static/img/vip.png">
							</image>
							<image v-else="item.vipswitch==0&&item.price!=0" src="../../../static/img/money.png">
							</image>
						</view>
						<image class="curriculum-book-img" :src="item.image"></image>
						<text class="curriculum-book-name">{{item.name}}<text
								v-if="item.vipswitch!=0&&item.price==0">VIP</text></text>
					</view>
					<view style="width: 2px;height: 200rpx;background-color: white;"></view>
				</view>
			</view>
		</view>

		<view v-if="searchResult!=''" class="curriculum-book">
			<view class="book-item" v-for="(item, index) in searchResult" :key="index">
				<view class="curriculum-book-item" @tap="goto_detail(item,'1')">
					<view class="vip-image">
						<!-- <image src="../../../static/img/mianfei.png"></image> -->
						<image v-if="item.vipswitch==0&&item.price==0" src="../../../static/img/mianfei.png"></image>
						<image v-else-if="item.vipswitch!=0&&item.price==0" src="../../../static/img/vip.png"></image>
						<image v-else="item.vipswitch==0&&item.price!=0" src="../../../static/img/money.png"></image>
					</view>
					<image class="curriculum-book-img" :src="item.image"></image>
					<text class="curriculum-book-name">{{item.name}}<text
							v-if="item.vipswitch!=0&&item.price==0">VIP</text></text>
				</view>
				<view style="width: 2px;height: 200rpx;background-color: white;"></view>
			</view>
		</view>



	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import Error from '@/core/untils/error/index';

	export default {
		data() {
			return {
				unit_list: [],
				unit_zylist: [],
				cityName: '',
				type: '',
				practice_record: {},
				subject_id: "",
				inputVal: '',
				searchResult: [],
				kemuData: [],
			}
		},
		onShow() {
			if (this.$myUserLogin.getToken()) {
				if (this.type == 1) {
					this.get_tiku_one();
				}
			}
		},
		onLoad(opts) {
			this.cityName = uni.getStorageSync('choose_cityName')
			this.token = opts.token
			if (this.token) {
				this.get_tiku_one()
			}
			console.log(JSON.stringify(opts) + "opts")
			if (opts && opts.from_type) {
				this.type = opts.from_type
				this.subject_id = opts.subject_id
			}

		},


		computed: {

		},

		methods: {
			async get_tiku_one() {
				//console.log(this.userinfo.token+"this.userinfo.token")
				let needLogin = false
				if (this.token) {
					needLogin = true
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitOne,
					data: {
						subject_id: 0,
						unit_id: 0,
						level: 1,
						province: this.cityName,
					},
					needLogin: needLogin
				});
				if (res.code === 1) {
					console.log(JSON.stringify(res.data))
					this.unit_list = res.data.unit_list
					this.unit_zylist = res.data.unit_zylist
					this.kemuData = this.unit_list
					this.kemuData = this.kemuData.concat(this.unit_zylist);
				}
			},
			goto_detail(item) {

				if (item.total_num == 0) { //如果目录下没有题目，提示用户
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '当前目录下没有题目，请联系老师'
					});
					return
				}
				if (this.type == '1') {
					if (item.is_last == 0) {
						//非终极栏目，点击进入下级栏目
						this.$openrul('/pagesa/questionBank/detail/index?id=' + item.id + '&from_type=' + this.type +
							'&name=' + item.name)
					} else if (item.is_last == 1) {
						if (this.$myUserLogin.getToken()) {
							//终极栏目，点击进入答题页
							this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' +
								this.type + '&name=' + item.name)
						} else {
							Error.errorNotLoggedIn();
						}
						//终极栏目，点击进入答题页
						this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this
							.type + '&name=' + item.name)
					}
				} else if (this.type == '2') {
					if (this.$myUserLogin.getToken()) {
						//点击进入答题页
						this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this
							.type + '&name=' + item.name)
					} else {
						Error.errorNotLoggedIn();
					}
				}
			},
			gohis() {
				uni.navigateBack({
					delta: 1
				})
			},


			// 搜索
			search() {
				let result = []
				this.kemuData.forEach((item, index) => {
					if (item.name.indexOf(this.inputVal) !== -1) {
						result.push(item)
					}
				})
				this.searchResult = result
				if (result == "") {
					uni.showToast({
						title: '没有该内容',
						icon: 'none'
					})
				}
			},

		}
	}
</script>
<style>
	page {
		background-image: linear-gradient(to top, #efefef, #ffffff);
	}

	.curriculum-title {
		width: 92%;
		margin: auto;
		font-weight: 500;
		font-size: 40rpx;
	}

	.curriculum-book {
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 20rpx;
	}

	/deep/ .uni-icons {
		color: #000;
	}

	.book-item {
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		width: 25%;
		justify-content: space-between;
	}

	.curriculum-book-item {
		display: flex;
		flex-flow: column wrap;

		margin-left: 20rpx;

	}

	.curriculum-book-img {
		width: 140rpx;
		height: 200rpx;
		margin: auto;
		box-shadow: 10rpx 10rpx 10rpx #e1e1e1;
		border-radius: 15rpx;

	}

	.curriculum-book-name {
		margin-left: 15rpx;
		margin-top: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}


	.kaoshi-head {
		/* background: #f7f8fa; */
		/* height: 116px; */

	}

	.kaoshi-head-top {
		color: #fff;
	}

	.kaoshi-head-top .kaoshi-head-m {
		font-weight: normal;
	}

	.kaoshi-head-banner {
		background: #fff;
		border-radius: 5px;
		width: 92%;
		margin: 10px auto;
		/* box-shadow: 0 0 10px rgba(208, 208, 208, 0.5); */
		/* margin-bottom: 18px; */
		padding: 16px 0 18px 0;
	}

	.kaoshi-user-top-remind-b {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 14px;
		color: #c5c5c5;
	}

	.kaoshi-user-top-remind-b-view {
		flex: 1;
	}

	.kaoshi-user-top-remind-b-title {
		font-size: 18px;
		color: #000;
		padding: 4px 0 6px 0;
	}

	.kaoshi-remind-title {
		font-size: 13px;
		color: #000;
	}

	.kaoshi-user-top-remind-b-title-content {
		display: flex;
		align-items: baseline;
		justify-content: center;
	}

	.kaoshi-user-top-remind-b img {
		width: 48px;
		height: 26px;
	}

	.kaoshi-user-top-h1 {
		font-size: 26px !important;
		padding: 0 !important;
	}

	/*题库列表*/
	.kaoshi-tiku {
		/* background: #fff; */
	}

	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 10px;
		/*    display: flex;
        flex-direction: row;
        align-items: center; */
		font-size: 16px;
		background: #fff;
		/* padding: 14px 0; */
		box-shadow: 0 0 10px rgba(208, 208, 208, 0.5);
		/* border-bottom: solid 1px #f5f5f5; */
	}

	.kaoshi-tiku-content>view {
		/* width: 92%; */
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 14px;
		/* border-bottom: solid 1px #f5f5f5; */
	}

	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kaoshi-tiku-content .icon-arrow {
		padding-left: 13px;
		color: #b3b3b3;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 2px;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
		font-size: 14px;
	}

	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
	}

	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.kaoshi-tiku-content-bottom {
		display: flex;
		align-items: center;
	}

	.kaoshi-tiku-content-flex .icon-dui2 {
		margin: 2px 2px 0 0;
		color: #3c7bfc;
	}

	.kaoshi-tiku-bilv {
		font-size: 22px;
		color: #000;
		display: flex;
		align-items: baseline;
	}

	.kaoshi-user-top-remind-b-title-p {
		font-size: 15px;
	}

	/* #ifdef MP-WEIXIN */
	.kaoshi-xcx {
		background: #fddddd;
		padding: 8px 0;
	}

	/* #endif */
	.vip-image>image {
		width: 40rpx;
		height: 20rpx;
		position: relative;
		top: 30rpx;
		left: 90rpx;
	}
</style>
